<html>
	<head>
		<!-- Load the Cloud Zoom CSS file -->
		<link href="cloud-zoom.1.0.3/cloud-zoom.css" rel="stylesheet" type="text/css" />
		<!-- You can load the jQuery library from the Google Content Network.
		Probably better than from your own server. -->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<!-- Load the Cloud Zoom JavaScript file -->
		<script type="text/JavaScript" src="cloud-zoom.1.0.3/cloud-zoom.1.0.3.js"></script>
		<script src="jquery.tools.min.js" tppabs="http://paulalady.com/App_Themes/default/js/jquery.tools.min.js" type="text/javascript"></script>
		 <link href="scrollable-horizontal.css" tppabs="http://paulalady.com/App_Themes/default/style/scrollable-horizontal.css" rel="stylesheet" type="text/css" />
		 <link href="scrollable-buttons.css" tppabs="http://paulalady.com/App_Themes/default/style/scrollable-buttons.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript">
			$(function() {
				$(".scrollable").scrollable();

				$(".items img").click(function() {
					// see if same thumb is being clicked
					if($(this).hasClass("active")) {
						return;
					}

					// calclulate large image's URL based on the thumbnail URL (flickr specific)
					var url = $(this).attr("src").replace("_t", "");

					// get handle to element that wraps the image and make it semi-transparent
					var wrap = $("#image_wrap").fadeTo("medium", 0.5);

					// the large image from www.flickr.com
					var img = new Image();

					// call this function after it's loaded
					img.onload = function() {

						// make wrapper fully visible
						wrap.fadeTo("fast", 1);

						// change the image
						wrap.find("img").attr("src", url);

						wrap.find("a").attr("href", url);
					};
					// begin loading the image from www.flickr.com
					img.src = url;

					// activate item
					$(".items img").removeClass("active");
					$(this).addClass("active");

					// when page loads simulate a "click" on the first image
				}).filter(":first").click();
			});

		</script>
	</head>
	<body>
		<!--
		An anchor with class of 'cloud-zoom' should surround the small image.
		The anchor's href should point to the big zoom image.
		Any options can be specified in the rel attribute of the anchor.
		Options should be specified in regular JavaScript object format,
		but without the braces.
		-->
		<div id="image_wrap">
		<div href='cute-date-idea.jpg' class = 'cloud-zoom' id='zoom1'
		rel="adjustX: 10, adjustY:-4">
			<img  src="cute-date-idea.jpg" alt='' title="Optional title display" />
		</div>
		</div>
		<!--
		You can optionally create a gallery by creating anchors with a class of 'cloud-zoom-gallery'.
		The anchor's href should point to the big zoom image.
		In the rel attribute you must specify the id of the zoom to use (useZoom: 'zoom1'),
		and also the small image to use (smallImage: /images/....)
		-->
		<div id="img_scroll" style="border:0px">
			<!--scroll-->
			<div style="margin:0 auto; width: 634px; height:120px;">
				<!-- "previous page" action -->
				<a class="prev browse left"> <img src="vn.png" /> </a>
				<!-- root element for scrollable -->
				<div class="scrollable" id="scrollable" style="border:0px">
					<!-- root element for the items -->
					<div class="items">
						<div style="width:102px">
							<a href='cute-date-idea.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
							rel="useZoom: 'zoom1', smallImage: 'cute-date-idea.jpg' "> <img src="cute-date-idea.jpg" alt = "Thumbnail 1"/></a>
						</div>
						<div style="width:102px">
							<a href='grin luffy_big.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
							rel="useZoom: 'zoom1', smallImage: 'grin luffy_small.jpg' "> <img src="grin luffy_small.jpg" alt = "Thumbnail 1"/></a>
						</div>
					</div>
				</div>
				<!-- "next page" action -->
				<a class="next browse right"></a>
			</div>
			<!--end scroll-->
		</div>
	</body>
</html>
